<template>
  <div :class="{ hidden: !selfShow }" id="bg">
    <div
      id="mg"
      style="
        width: 550px;
        padding-bottom: 40px;
        margin-top: 180px;
        margin-left: 60px;
        background: #f3f4f6;
        border-radius: 10px;
        padding-top: 30px;
      "
    >
      <div class="top">
        <h2>支付确认</h2>
        <hr style="width: 500px; margin-left: 25px; margin-top: 25px" />
      </div>
      <div class="main" style="margin-top: 15px">
        <span style="margin-left: 70px; letter-spacing: 2px"
          >您好，您的订单已经生成，是否立即支付订单。</span
        >
        <div style="margin: 15px 98px">
          <span>支付金额</span>
          <span style="margin-left: 60px; color: red"
            >￥{{ cdnTotalAmount }}</span
          >
        </div>
        <div style="margin: 15px 98px">
          <span>账户金额</span>
          <span style="margin-left: 60px; color: red">￥{{ myTotal }}</span>
        </div>
        <div>
          <button
            @click="close"
            class="btn4"
            style="margin-top: 15px; margin-left: 98px"
          >
            取消
          </button>
          <button @click="save" class="btn4" style="margin-left: 100px">
            确认支付
          </button>
        </div>
      </div>
    </div>
    <div id="tips" class="tips" :hidden="tips">
      <img :src="resultIcon" />
      <span>{{ msg }}</span>
    </div>
  </div>
</template>

<script>
let pressId;
import bus from "../../assets/eventBus";
import ajax from "../../common/ajax";
import api from "../../common/api";

let bookGuid;
let isShow;
var re = /^[0-9]*[1-9][0-9]*$/;
export default {
  name: "Balance",
  props: ["resData", "cdnTotalAmount", "bookNum"],
  data() {
    return {
      selfShow: false,
      myTotal: 0,
      resultIcon: "../assets/images/icon_error.png",
      msg: "",
      tips: true,
    };
  },
  created() {
    /**
     * 获取账户余额
     */
    let that = this;
    console.log(that)
    pressId = this.$route.query.pressId;
    ajax.get({
      url: api.charge.routeName + api.charge.children.detail,
      data: { userId: that.$route.query.userId },
      success(res) {
        // console.log(res);
        // console.log(res.balance);
        // that.myTotal = res.balance;
      },
    });
  },
  mounted() {
    /**
     * 打开弹窗
     */
    let that = this;
    bus.$on("showDetail", function (t, m) {
      isShow = m;
      if (m !== false) {
        bookGuid = t;
      } else {
        bookGuid = that.$route.query.bookGuid;
      }
      that.selfShow = true;
      console.log(that.myTotal);
    });
  },
  methods: {
    /**
     * 关闭弹窗
     */
    close() {
      this.selfShow = false;
    },

    /**
     * 支付
     */
    save() {
      let that = this;
      console.log(this.resData);
      console.log(this.bookNum);
      let param = {
        userId: this.resData.userId,
        pressId: this.resData.pressId,
        payAmount: this.cdnTotalAmount,
        bookNum: this.bookNum,
        bookGuid: bookGuid,
      };

      if (this.bookNum == "") {
        this.msg = "图书发行数量不为空";
        this.resultIcon = require("../../assets/images/icon_error.png");
        this.tips = false;
        setTimeout(function () {
          that.tips = true;
        }, 1500);
      } else if (!re.test(this.bookNum)) {
        this.msg = "图书发行量只能输入大于0的整数";
        this.resultIcon = require("../../assets/images/icon_error.png");
        this.tips = false;
        setTimeout(function () {
          that.tips = true;
        }, 1500);
      } else {
        ajax.post({
          url: api.orders.routeName + api.orders.children.add,
          data: param,
          success(res) {
            alert("提交成功");
            if (isShow !== false) {
              that.selfShow = false;
            } else {
              window.external.JSCallMFCFunctionClose();
            }
          },
          fail(res) {
            // alert(res.ErrMsg)
            if (res.ErrCode == 300001) {
              alert("订单不存在");
            } else if (res.ErrCode == 300003) {
              alert(" 该订单正在审核中");
            } else if (res.ErrCode == 300011) {
              alert("支付失败，当前余额不足，请尽快前往充值！");
            }
          },
        });
      }
    },
  },
};
</script>

<style scoped>
h2 {
  font-size: 24px;
  margin-left: 210px;
  color: black;
  letter-spacing: 3px;
}

.hidden {
  display: none;
}

#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  z-index: 999;
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 2px;
}
.btn4 {
  width: 120px;
  height: 30px;
  border: 1px solid black;
  background: white;
  border-radius: 8px;
}
.tips {
  background: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  position: fixed;
  top: 0;
  left: 40%;
  width: auto;
  height: 65px;
  z-index: 99;
}

.tips img {
  width: 30px;
  height: 30px;
  position: relative;
  margin-top: 18px;
  margin-left: 66px;
}

.tips span {
  font-size: 15px;
  color: #3c3c3c;
  letter-spacing: -0.05px;
  line-height: 16px;
  display: inline-block;
  position: relative;
  top: -8px;
  margin-left: 13px;
  padding-right: 66px;
}
</style>
